import React from 'react'
import { Carousel, Flex, Grid } from 'antd-mobile'
import http from 'utils/http'
import './index.scss'
import { Link } from 'react-router-dom'
import SearchHeader from 'common/SearchHeader'

// 实际访问的, 就是 src 目录下面的 assets 文件夹
import Nav1 from 'assets/images/nav-1.png'
import Nav2 from 'assets/images/nav-2.png'
import Nav3 from 'assets/images/nav-3.png'
import Nav4 from 'assets/images/nav-4.png'
import { getCurrentCity } from 'utils/city'
import { BASE_URL } from 'utils/config'

// 准备导航的数据
const navList = [
  { title: '整租', path: '/home/house', icon: Nav1 },
  { title: '合租', path: '/home/house', icon: Nav2 },
  { title: '地图找房', path: '/map', icon: Nav3 },
  { title: '去出租', path: '/rent', icon: Nav4 },
]

class Index extends React.Component {
  state = {
    // 轮播图的数据
    swiperList: [],
    imgHeight: 200,
    // 租房小组的数据
    houseList: [],
    // 最新资讯的数据
    newsList: [],
    // 准备当前城市的信息数据
    city: {
      label: '北京',
      value: '',
    },
  }
  // componentDidMount
  async componentDidMount() {
    // 获取轮播图的数据
    this.getSwiper()

    // 获取城市信息
    const city = await getCurrentCity()
    this.setState({ city }, () => {
      // 获取租房小组的数据
      this.getGroupList()
      // 获取最新资讯的数据
      this.getNewsList()
    })
  }
  // 获取轮播图的数据
  async getSwiper() {
    const res = await http.get('/home/swiper')
    const { status, body } = res.data
    if (status === 200) {
      this.setState({
        swiperList: body,
      })
    }
  }
  // 获取租房小组的数据
  async getGroupList() {
    const res = await http.get('/home/groups', {
      params: {
        area: this.state.city.value,
      },
    })
    const { status, body } = res.data
    if (status === 200) {
      this.setState({
        houseList: body,
      })
    }
  }
  // 获取最新资讯的数据
  async getNewsList() {
    const res = await http.get('/home/news', {
      params: {
        area: this.state.city.value,
      },
    })
    const { status, body } = res.data
    if (status === 200) {
      this.setState({
        newsList: body,
      })
    }
  }
  // 渲染轮播图
  renderSwiper() {
    // 如果没有数据, 就直接用 Carousel 组件渲染, 有些功能就没有初始化成功
    // 只有有数据了, 才需要展示轮播图组件
    // autoplay: true 自动播放
    // autoplayInterval 自动播放的时间间隔
    // infinite: 无限轮播
    // beforeChange 准备要开始滑动切换了
    // afterChange  滑动切换完成了
    if (this.state.swiperList.length === 0) {
      return null
    }
    // 有数据了, 才渲染Carousel
    return (
      <Carousel autoplay={true} autoplayInterval={3000} infinite>
        {this.state.swiperList.map((item) => (
          <a
            key={item.id}
            href="http://www.baidu.com"
            style={{
              display: 'inline-block',
              width: '100%',
              height: this.state.imgHeight,
            }}
          >
            <img
              src={BASE_URL + item.imgSrc}
              alt=""
              style={{ width: '100%', verticalAlign: 'top' }}
              onLoad={() => {
                // 让window触发一下resize事件, 图片高度自适应开
                window.dispatchEvent(new Event('resize'))
                // 图片加载完了后, 将父容器 a, 高度设置成自适应
                this.setState({ imgHeight: 'auto' })
              }}
            />
          </a>
        ))}
      </Carousel>
    )
  }
  // 渲染导航
  // Sticky
  renderNav() {
    // 1. <Flex></Flex> 等价于写了一个 display: flex的容器
    // 2. <Flex.Item></Flex.Item> 等价于写了一个 flex: 1; 的容器
    return (
      <div className="nav">
        <Flex>
          {navList.map((item) => (
            <Flex.Item key={item.title}>
              <Link to={item.path}>
                <img src={item.icon} alt="" />
                <p>{item.title}</p>
              </Link>
            </Flex.Item>
          ))}
        </Flex>
      </div>
    )
  }
  // 渲染租房小组
  renderGroup() {
    return (
      <div className="group">
        {/* 标题部分 */}
        <div className="group-title">
          <h3>租房小组</h3>
          <span className="more">更多</span>
        </div>
        {/* 内容部分 */}
        <div className="group-content">
          {/* 
          columnNum 控制gird组件的列数
          renderItem 可以传入一个函数, 函数中返回结构, 定制每个小的item的内容
          data 整个gird渲染的数据
          square 是否每个格子是正方形
          hasLine 是否有边框
        */}
          <Grid
            square={false}
            data={this.state.houseList}
            columnNum={2}
            hasLine={false}
            renderItem={(item, index) => (
              <Flex className="group-item" justify="around">
                <div className="desc">
                  <p className="title">{item.title}</p>
                  <span className="info">{item.desc}</span>
                </div>
                <img src={BASE_URL + item.imgSrc} alt="" />
              </Flex>
            )}
          />
        </div>
      </div>
    )
  }
  // 渲染最新资讯
  renderNews() {
    return (
      <div className="news">
        <h3 className="news-title">最新资讯</h3>
        {this.state.newsList.map((item) => (
          <div key={item.id} className="news-item">
            <div className="imgwrap">
              <img className="img" src={BASE_URL + item.imgSrc} alt="" />
            </div>
            <Flex className="content" direction="column" justify="between">
              <h3 className="title">{item.title}</h3>
              <Flex className="info" justify="between">
                <span>{item.date}</span>
                <span>{item.from}</span>
              </Flex>
            </Flex>
          </div>
        ))}
      </div>
    )
  }
  render() {
    return (
      <div className="index">
        {/* 展示轮播图 */}
        <div className="carousel" style={{ height: this.state.imgHeight }}>
          <SearchHeader cityName={this.state.city.label}></SearchHeader>
          {this.renderSwiper()}
        </div>

        {/* 渲染导航模块 */}
        {this.renderNav()}

        {/* 渲染租房小组 */}
        {this.renderGroup()}

        {/* 渲染最新资讯 */}
        {this.renderNews()}
      </div>
    )
  }
}

export default Index
